<template>
    <a-form layout="vertical" :model="formState" @finish="onFinish">
        <!-- 第一行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="员工名称" name="staffName" hasFeedback :rules="[{
                    required: true, message: '员工名称为必填项',
                }]">
                    <a-input v-model:value="formState.staffName"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="考勤类型" name="attendanceType" hasFeedback
                :rules="[{
                    required: true, message: '考勤类型为必填项',
                }]">
                    <a-select v-model:value="formState.attendanceType"> 
                        <a-select-option value="1">迟到</a-select-option>
                        <a-select-option value="2">早退</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>
        <!-- 第二行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="考勤时间" name="createdTime" hasFeedback :rules="[{
                    required: true, message: '考勤时间为必填项',
                }]">
                    <a-date-picker v-model:value="formState.createdTime"></a-date-picker>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="24" style="text-align: right;">
                <a-button type="primary" html-type="submit" class="mr-25">创建</a-button>
            </a-col>
        </a-row>
    </a-form>
</template>

<script setup lang="ts">
import appStore from "@/store";
import apis from '@/apis/index';
import { message } from "ant-design-vue";
const props = defineProps({
    dialogStatus: {
        type: Boolean,
        default: false,
    },
    setDialogStatus: {
        type: Function,
        default: () => {},
    }
});
const formState = reactive({
    staffName: '',
    attendanceType: '',
    createdTime: '',
});
const onFinish = async (values) => {
    console.log('onfinish', values);
    const temp = {
        createdTime: new Date(formState.createdTime),
        // onboardingTime: new Date(formState.onboardingTime),
    };
    const params = {
        ...formState,
        ...temp,
    };
    
    const res = await apis.attendance.addAttendance_API(params);
    console.log(res,'addd')
    if (res) {
        props.setDialogStatus(false);
        message.success('考勤信息添加成功');
        return;
    }
    message.error('考勤信息添加失败');
}
onMounted(() => { });
</script>

<style  lang="less" scoped>
input {
    width: 100%;
}

.ant-picker {
    width: 100%;
}

.ml-40 {
    margin-left: 40px;
}

.mr-25 {
    margin-right: 25px;
}
</style>
